
import ChartsConfig from '../../../config/ChartsConfig';
import { StatisticType } from '../../../services/StatisticService';
import StatisticStore from '../../../stores/StatisticStore';
import { observer } from 'mobx-react';
import './Statistic.scss';


export const StatisticTabs = observer(() =>{
    var onChange = (type: StatisticType, index: number) => {
        StatisticStore.handleTabChange(type,false,index);
    };
    return (
        <div className="statisticTabWrapper">
            <div className="taberContainer">
                <div className="tabBar" style={{
                    width: (100 / ChartsConfig.statisticTabs.length) + '%',
                    left: StatisticStore.checkedPosition
                }}
                ></div>
                <div className="taber">
                    {ChartsConfig.statisticTabs.map((t, i) => {
                        return <div key={i} className={StatisticStore.type === t.type ? 'tabItemChecked' : 'tabItem'} onClick={() => {
                            onChange(t.type, i);
                            return;
                        }}>
                            {t.text}
                        </div>
                    })}
                </div>

            </div>
        </div>
    );
})